<template>
  <div class="workbench">
    <div class="page-header">
      <h1>工作台</h1>
      <p>欢迎使用农场管理系统</p>
    </div>
    
    <div class="workbench-content">
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon">🌾</div>
          <div class="stat-info">
            <h3>种植面积</h3>
            <p class="stat-value">1,234 亩</p>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">💰</div>
          <div class="stat-info">
            <h3>项目补助</h3>
            <p class="stat-value">¥567,890</p>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">🏭</div>
          <div class="stat-info">
            <h3>基地数量</h3>
            <p class="stat-value">45 个</p>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">👥</div>
          <div class="stat-info">
            <h3>参与农户</h3>
            <p class="stat-value">1,234 户</p>
          </div>
        </div>
      </div>
      
      <div class="recent-activities">
        <h2>最近活动</h2>
        <div class="activity-list">
          <div class="activity-item">
            <div class="activity-icon">📊</div>
            <div class="activity-content">
              <h4>数据更新</h4>
              <p>基地种植面积数据已更新</p>
              <span class="activity-time">2小时前</span>
            </div>
          </div>
          
          <div class="activity-item">
            <div class="activity-icon">💰</div>
            <div class="activity-content">
              <h4>补助发放</h4>
              <p>项目补助资金已发放到位</p>
              <span class="activity-time">1天前</span>
            </div>
          </div>
          
          <div class="activity-item">
            <div class="activity-icon">🌱</div>
            <div class="activity-content">
              <h4>种植计划</h4>
              <p>春季种植计划已制定完成</p>
              <span class="activity-time">3天前</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 工作台页面逻辑
</script>

<style scoped>
.workbench {
  padding: 24px;
}

.page-header {
  margin-bottom: 32px;
}

.page-header h1 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 28px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 16px;
}

.workbench-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  font-size: 32px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f8ff;
  border-radius: 8px;
}

.stat-info h3 {
  margin: 0 0 8px 0;
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

.stat-value {
  margin: 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.recent-activities {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.recent-activities h2 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 20px;
  font-weight: 600;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: 6px;
  background: #fafafa;
}

.activity-icon {
  font-size: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.activity-content h4 {
  margin: 0 0 4px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.activity-content p {
  margin: 0 0 8px 0;
  color: #666;
  font-size: 14px;
}

.activity-time {
  color: #999;
  font-size: 12px;
}
</style> 